<template>
    <view class="page-community-index">
        <view class="menu">
            <u-row gutter="30">
				<u-col span="6" v-for="(item,index) in menu" :key="index">
                    <u-image :src="item.image" width="100%" height="270rpx" />
				</u-col>
            </u-row>
        </view>
        <view class="p-4" v-if="longList.list.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view> 
        <view class="album">
            <view class="item" v-for="(item,index) in longList.list" :key="index" @click="proxy.$util.gotoPage('/packageB/creation/detail', {id: item.id})">
                <view class="avatar">
                    <u-image width="84rpx" height="84rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
                </view>
                <view class="content">
                    <view class="name">{{ item.createBy }}</view>
                    <view class="text">{{ item.content }}</view>
                    <view class="comment">
                        <view class="time">1分钟</view>
                        <view class="btns">
                            <view class="btn-item" @click.stop="handleLike(item)"><u-image :src="item.yesNoLikes ? proxy.$icon.likePre : proxy.$icon.likeDef" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{ item.likesSum }}</text></view>
                            <view class="btn-item" @click.stop="handleFavorite(item)"><u-image :src="item.yesNoFavorites ? proxy.$icon.collectPre : proxy.$icon.collectDef" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{ item.favoritesSum }}</text></view>
                            <view class="btn-item" @click="proxy.$util.gotoPage('/packageB/creation/detail', {id: item.id})"><u-image :src="proxy.$icon.talk" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{ item.commentsSum }}</text></view>
                            <!-- <view class="btn-item"><u-image :src="proxy.$icon.share" width="42rpx" height="42rpx"></u-image><text class="ml-1">999</text></view> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <fly-tabbar ref="refFlyTabbar" :current="3"/>
        <fixed-btn ref="refFixedBtn"/>
    </view>
</template>
<script setup lang="ts">
import FlyTabbar from '@/components/FlyTabbar/index.vue'
const refFlyTabbar = ref();
import FixedBtn from './components/fixedBtn.vue'
import { useLonglist } from '@/static/fn/longList';
const initObj = {
	listApi:'/admin/articles/page',
}
let { searchForm, longList, getList} = useLonglist(initObj);
import {onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
import { useArticleStore } from '@/stores/article';
const articleStore = useArticleStore();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const refFixedBtn = ref();
const menu = reactive([
    {name: '建立分会', image: proxy.$icon.establishbranchBtn},
    {name: '历史活动', image: proxy.$icon.historicalactivities},
]);
// let list = ref([]);
const handleLike = (item) => {
    if(item.yesNoLikes){
        articleStore.deleteLike(item.id).then(res => {
            getList('refresh');
        });
    }else{
        let params = {
            articleId: item.id,
            userId: appStore.userInfo.userId,
        }
        articleStore.handleLike(params).then(res => {
            getList('refresh');
        });
    }
};
const handleFavorite = (item) => {
    if(item.yesNoFavorites){
        articleStore.deleteFavorite(item.id).then(res => {
            getList('refresh');
        });
    }else{
        let params = {
            articleId: item.id,
            userId: appStore.userInfo.userId,
        }
        articleStore.handleFavorite(params).then(res => {
            getList('refresh');
        });
    }
};
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onShow(() => {
    getList('refresh');
    
    
});
</script>
<style lang="scss">
page{background:#fff;}
</style>